<script setup lang="ts">
import { reactive, watch } from 'vue'

const user = reactive({
  name: 'ikun',
  info: {
    age: 18,
    gender: '男'
  }
})

watch(() => user.info.age, () => {
  console.log('今年刚满', user.info.age, '岁')
})

watch(user, () => {
  console.log('名字变了', user.name)
})

watch(user.info, () => {
  console.log('info', user.info)
  console.log('gender', user.info.gender)
  // deep: true 深度监听
  // immediate: true 立即执行一次
}, { deep: true, immediate: true })

</script>

<template>
  <p>{{ user }}</p>
  <button @click="user.info.age++">age++</button>
  <button @click="user.name = 'ikun' + (user.info.age - 18)">name</button>
  <button @click=" user.info.gender = user.info.gender === '男' ? '女' : '男'">gender↑↓</button>
</template>